<template>
	<div>
		<div class="container">
			<!-- 图片区 -->
			<!-- <div class="logo"><img src="" alt="" /></div> -->
			<!-- 登陆区 -->
			<el-form ref="ruleForm" label-width="0px" class="formClass" :rules="rules" :model="ruleForm">
				<el-form-item prop="name">
					<el-input prefix-icon="el-icon-s-custom" v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="ruleForm.password" type="password" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item class="btn">
					<el-button type="primary" @click="login('ruleForm')">登录</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { setToken } from '@/utils/auth'
import Cookies from "js-cookie";
export default {
	data() {
		return {
			ruleForm: {
				name: '',
				password: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入您的用户名',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入您的密码',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		//重置表单到初始值
		resetForm(formName) {
			this.$refs[formName].resetFields()
			//有默认值，用来清空表单
			// this.ruleForm.username = ''
			// this.ruleForm.password = ''
		},
		//登录实现
		//先进行预验证
		login(formName) {
			this.$refs[formName].validate(async (val) => {
				// if (!val) {
				// 	this.$message.error('输入的信息有误，请重新输入')
				// 	return
				// }
				// const { data:res } = await this.$http.post('login', this.ruleForm)
				// // console.log(res)
				// if(res.meta.status == 200){
				// 	//保存token
				// 	sessionStorage.setItem('Token',res.data.token)
				// 	//跳转到home组件
				// 	this.$router.push({path:'/home'})
				// 	this.$message.success('登陆成功')
				// }else{
				// 	//跳转到注册组件

				// }

				this.$apiFun.login(this.ruleForm).then((res) => {
					console.log(res)
					if (res.status == 200) {
						setToken(res.access_token)

						Cookies.set("userInfo", JSON.stringify(res), {
							expires: 1,
						});
						this.$router.push({ path: '/home' })
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message);
					}

				}).catch((error) => {
					this.$message.error(error.response.data.message);
					console.log(error)
				})


			})
		}
	},
	created() { }
}
</script>

<style scoped>
/* 图片区样式开始 */
.container {
	background-color: #fff;
	height: 300px;
	width: 400px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.logo {
	width: 120px;
	height: 120px;
	border: 11px solid #fff;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #eeeeee;
	background-clip: content-box;
	overflow: hidden;
	box-shadow: #ddd 0px 0px 10px;
}

.logo img {
	width: 100%;
	height: 100%;
}

/* 图片区样式结束 */
/* 登陆区样式开始 */
.formClass {
	width: 100%;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%);
	box-sizing: border-box;
	padding: 0 40px;
}

.btn {
	display: flex;
	justify-content: flex-end;
}

/* 登陆区样式结束 */
</style>
